<template>
  <div class="dashboard-container">
    <div v-loading="loading" class="app-container">
      <!-- <h2>组织架构</h2> -->
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <TreeTools :node-data="titleData" @on-open="handleOpen" />
        <!-- 树形结构 ,这是因为要形成树形结构-->
        <el-tree :data="departs" :props="defaultProps">
          <!-- 定制树形结构节点布局 -->
          <template v-slot="{ data }">
            <!-- 如果在组件上绑定事件,那么$event表示子传父的值,如果是DOM元素上绑定的时间，那么$event表示事件对象 -->
            <TreeTools :node-data="data" @action-success="loadDepartList" @on-open="handleOpen" />
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- 添加部门 -->
    <!-- :is-show-dept="isshowDept" 父传子，不显示弹窗，当该值变成true之后，弹窗就显示了 -->
    <!-- @on-close="isshowDept = $event" 子传父，关闭弹窗 -->
    <!-- 如果用sync标识符就相当于是父子之间的数据的双向绑定 -->
    <!-- <AddDept :is-show-dept="isshowDept" @on-close="isshowDept = $event" /> -->
    <!-- 用sync修饰符的方法，但是用了sync修饰符，子组件的触发事件就需要改格式为update:事件名 -->
    <AddDept
      :type="type"
      :dlist="dlist"
      :current-det-id="currentDetId"
      :is-show-dept.sync="isshowDept"
      @action-success="loadDepartList"
    />
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { reqGetDepartments } from '@/api/departments.js'
import { translateListToTree } from '@/utils/index.js'
import AddDept from './components/add-dept.vue'

export default {
  name: 'Department',
  components: { TreeTools, AddDept },
  data() {
    return {
      // loading效果
      loading: false,
      // 点击的类型，如点击的是添加，还是编辑
      type: '',
      // 部门原始数据，存储原始数据
      dlist: [],
      // 当前父级部门
      currentDetId: '',
      // 控制添加部门弹窗标志位
      isshowDept: false,
      // 标题数据
      titleData: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        root: true,
        // 一级部门的父id是空字符串
        id: ''
      },
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  created() {
    this.loadDepartList()
  },
  methods: {
    // 渲染部门的数据到页面上
    // 这里面的接收的info是子集传过来的
    handleOpen(info) {
      // 将子组件传过来的id存到data中
      this.currentDetId = info.id
      // 将子组件传过来的类型存到data中，这个类型是"add"或"edit"
      this.type = info.type
      // 打开弹窗
      this.isshowDept = true
      // 编辑时需要获取部门详情数据
      if (this.operateFlag === 'edit') {
        // 13#####################################################
      }
    },
    // 加载部门列表
    async loadDepartList() {
      try {
        // 添加加载
        this.loading = true
        // 关闭弹窗
        this.isshowDept = false
        const ret = await reqGetDepartments()
        console.log(ret)
        if (ret.code === 10000) {
          this.titleData.name = ret.data.companyName
          // translateListToTree这个函数被拆分到了utils下面的index.js文件中了
          // 将获取的数据转存到dlist中，保存后端返回的原始部门列表数据
          this.dlist = ret.data.depts
          // 这个是将原始数据转为树形结构了
          this.departs = translateListToTree(ret.data.depts, '')
          // this.departs = ret.data.depts
        }
      } catch {
        this.$message.error('获取部门列表失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}
</style>
